<template>
    <div>
        <div class="main-wrapper">
            <div :style="{
                                marginLeft:getTextWidth(config.beforeUnit) + 4 + 'px',
                                marginRight:getTextWidth(config.unit) + 4 + 'px',
                         }">
                <el-input-number ref="number-input"
                                 style="width: 100%"
                                 :value="value"
                                 v-bind="Object.assign({controls:false,validEvents:false},config.props)"
                                 v-on="$listeners"/>
            </div>
        </div>
        <p class="left">
            {{config.beforeUnit}}
        </p>
        <p class="right" :style="{marginLeft:-getTextWidth(config.unit) + 'px'}">
            {{config.unit}}
        </p>
    </div>
</template>

<script>
    export default {
        inject: ['dict'],
        props: {
            value: '',
            config: Object,
        },
        methods: {
            getTextWidth(text) {
                return !text ? -4 : text.length * 14
            },
        },
        mounted() {
            // fix 低版本elm
            if (this.version < '2.4.10' && this.config.type === this.dict.number) {
                try {
                    this.$refs['number-input'].$el.querySelector('.el-input__inner').placeholder = this.config.props && this.config.props.placeholder || ''
                } catch (e) {

                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .main-wrapper {
        float: left;
        width: 100%;
    }

    .left {
        float: left;
        margin-left: -100%;
        white-space: nowrap; // 可能会有一点影响
    }

    .right {
        float: left;
        // margin-left: -20px;
        white-space: nowrap; // 可能会有一点影响
    }
</style>
